<template>
  <div class="Help">
    <Head msg="帮助与反馈"></Head>
    <input type="text" placeholder="请填写姓名" v-model="name" />
    <input type="number" placeholder="请填写联系电话" v-model="tel" />
    <textarea
      class="textarea"
      placeholder="请填写需要反馈的内容，如有必要，工作人员将第一时间联系您!"
      v-model="content"
    ></textarea>

    <div class="login-btn" @click="feedBack">提交</div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import Sence from '../sence/Sence';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Head from '@/components/Head.vue';

@Component({
  components: {
    Head,
  },
})
export default class Help extends Sence {
  public name: string = '';
  public tel: string = '';
  public content: string = '';

  //提交
  public feedBack() {
    if (this.name == '') {
      this.toast('姓名不能为空', 'warn');
      return;
    } else if (this.tel == '') {
      this.toast('手机号不能为空', 'warn');
      return;
    } else if (this.content == '') {
      this.toast('内容不能为空', 'warn');
      return;
    }
    this.post('api/v1/feedBack', {
      username: this.name,
      mobile: this.tel,
      content: this.content,
    }).then((res: any) => {
      this.toast('提交成功！');
      setTimeout(() => {
        this.$router.push('/');
      }, 1500);
    });
  }
}
</script>

<style scoped lang="stylus">
input {
  height: 40px;
  line-height: 40px;
  width: 100vw;
  box-sizing: border-box;
  background: #f2f2f2;
  padding: 0 10px;
  font-size: 14px;
  margin-bottom: 10px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.textarea {
  padding: 3px 10px;
  border: white;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  word-break: break-all;
  background: #f2f2f2;
  font-size: 14px;
  box-sizing: border-box;
  width: 100vw;
  height: 50vw;
}

.login-btn {
  margin: auto;
  margin-top: 4vh;
  background: red;
  color: white;
  width: 40vw;
  font-weight: bold;
  padding: 8px 0;
  font-size: 15px;
  border-radius: 8px;
}
</style>
